import { RuleConfigCondition, RuleConfigSeverity, RulesConfig } from "@commitlint/types";
import { Card, List, Modal, Button } from "antd";
import { RuleList } from "./rule";

interface RuleListModalProps {
    rules: Partial<RulesConfig>;
    onCancel: () => void;
    onAdd: (ruleId: string, ruleValue: [RuleConfigSeverity, RuleConfigCondition, unknown] | [RuleConfigSeverity, RuleConfigCondition]) => void;
}

export default function RuleListModal(props: RuleListModalProps) {
    return (
        <Modal open title="增加规则" footer={null}
            bodyStyle={{ maxHeight: "calc(100vh - 300px)", overflowY: "scroll" }}
            onCancel={e => {
                e.stopPropagation();
                e.preventDefault();
                props.onCancel();
            }}>
            <List rowKey="id" dataSource={RuleList.filter(rule => props.rules[rule.id] == undefined)} renderItem={rule => (
                <List.Item key={rule.id}>
                    <Card title={rule.id} bordered={false} style={{ width: "100%" }} extra={
                        <Button type="link" onClick={e => {
                            e.stopPropagation();
                            e.preventDefault();
                            if (rule.defaultValue == undefined) {
                                props.onAdd(rule.id, [1, rule.flag]);
                            } else {
                                props.onAdd(rule.id, [1, rule.flag, rule.defaultValue]);
                            }
                        }}>增加规则</Button>
                    }>
                        <p>{rule.descCn}</p>
                        <p>{rule.descEn}</p>
                        {rule.defaultValue !== undefined && (
                            <p>额外参数：{JSON.stringify(rule.defaultValue)}</p>
                        )}
                    </Card>
                </List.Item>
            )} />
        </Modal>
    )
}